<template>
<view>
	<!-- 导航栏 -->
	<view class="header-fit-box" :style="'padding-top: '+ StatusBar +'px;'">
		<view class="header-fit" :style="{'height':(CustomBar-StatusBar) +'px'}">
			<image @click="back" class="back" src="@/static/home/subpage/back_black.png"></image>
			<text class="text">AI测策略</text>
			<view class="item" @click="sharefix">
				<text class="li">分享</text>
			</view>
		</view>
	</view>
	<view :style="{'height':CustomBar +'px'}" style="border-bottom:2rpx solid #F6F7F9;"></view>
	<mescroll-body :sticky="true" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
		<view class="table-box">
			<view class="table">
				<view class="tr">
					<view class="tl">品种</view>
					<view class="tl">现货价格</view>
					<view class="tl">
						<text>结算价格</text>
						<view class="drop">
							<view class="icn-top"></view>
						</view>
					</view>
					<view class="tl">
						<text>主力基差</text>
						<view class="drop">
							<view class="icn-top"></view>
							<view class="icn-bottom icn-red"></view>
						</view>
					</view>
					<view class="tl">
						<text>基差率</text>
						<view class="drop">
							<view class="icn-top"></view>
							<view class="icn-bottom"></view>
						</view>
					</view>
				</view>
				<view class="box">
					<view class="row" v-for="(item,index) in 10">
						<view class="tl">
							<view class="sup">基差率</view>
							<view class="sub">2023.11.08</view>
						</view>
						<view class="tl">3950</view>
						<view class="tl">3800</view>
						<view class="tl">150</view>
						<view class="tl">+3.80%</view>
					</view>
				</view>
			</view>
		</view>
	</mescroll-body>
	<share-fix :isshare="isshare" :animationData="animationData" @closesharefix="closesharefix"></share-fix>	
</view>
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";	
export default {
	mixins: [MescrollMixin], // 使用mixin
	data() {
		return {
			StatusBar: this.StatusBar,
			CustomBar: this.CustomBar,
			animationData: {},
			animation:{},
			isshare: false,
		};
	},
	onReady(){
			var animation = uni.createAnimation({
				duration: 500,
				timingFunction: 'ease',
			})
			this.animation =animation;
	},
	methods:{
		back(){
			uni.navigateBack();
		},
		/*下拉刷新的回调 */
		downCallback() {
			this.mescroll.resetUpScroll()
		},
		/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
		upCallback(page) {
			setTimeout(()=>{
				this.mescroll.endSuccess(9,false);// 加载成功
			},1500)
		},
		sharefix(){
			this.isshare= true;
			this.animation.translateY(0).step();
			this.animationData = this.animation.export();
		},
		closesharefix(){
			this.isshare= false;
			this.animation.translateY("100%").step();
			this.animationData = this.animation.export();
		},
	}
}
</script>

<style lang="scss">
.table-box{
	padding:0 24rpx;
	.cl-red{
		color: #EE5953 !important;
	}
	.table{
		border-top: 2rpx solid #F6F7F9;
		.tr{
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2rpx solid #F6F7F9;
			padding:24rpx 0;
			.tl{
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: rgba(0,0,0,0.6);
				.drop{
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					margin-left:8rpx;
					.icn-top{
						width:0rpx;height:0rpx;
						border:8rpx solid transparent;
						border-bottom-color:#BFBFBF;
						border-bottom-width: 10rpx;
						margin-bottom:2rpx;
					}
					.icn-bottom{
						width:0rpx;height:0rpx;
						border:8rpx solid transparent;
						border-top-color:#BFBFBF;
						border-top-width: 10rpx;
						margin-top:2rpx;
					}
					.icn-red{
						border-top-color: #EE5953;
					}
				}
			}
			.tl:nth-child(3){
				align-items: flex-end;
				.drop{
					position: relative;
					top:2rpx;
					.icn-top{
						width:0rpx;height:0rpx;
						border:9rpx solid transparent;
						border-bottom-color:#7899DE;
						border-bottom-width: 9rpx;
						margin-bottom:0;
						transform: rotate(135deg);
					}
				}
			}
		}
		.box{
			.row{
				padding:24rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 2rpx solid #F6F7F9;
				.tl{
					display: flex;
					align-items: center;
					font-size: 24rpx;
					font-weight: bold;
					color: rgba(0,0,0,0.8);
					.sup{
						color: #356FE5;
					}
					.sub{
						font-size: 20rpx;
						font-weight: 400;
						color: rgba(0,0,0,0.6);
						height: 28rpx;
					}
				}
				.tl:nth-child(4){
					color: #33C45B;
				}
				.tl:nth-child(5){
					color: #33C45B;
				}
			}
		}
		.tl:nth-child(1){
			width:20%;
			display: flex;
			align-items: flex-start !important;
			flex-direction: column;
			justify-content: center;
		}
		.tl:nth-child(2){
			width:20%;
			justify-content: center;
		}
		.tl:nth-child(3){
			width:20%;
			justify-content: center;
		}
		.tl:nth-child(4){
			width:20%;
			justify-content: center;
		}
		.tl:nth-child(5){
			width:20%;
			justify-content: flex-end;
		}
	}
}
</style>
